<template>
    <div class="article-container">
        <el-card class="filter-card">
            <div slot="header" class="clearfix">
                <!-- 面包屑路径导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 面包屑路径导航 -->
            </div>
            <!-- 数据筛选表单 -->
            <el-form ref="form" :model="form" label-width="50px" size="small">
                <el-form-item label="状态">
                    <el-radio-group v-model="status">
                        <!-- el-radio 默认把label 作为文本和选中之后的value值 -->
                        <el-radio :label="null">全部</el-radio>
                        <el-radio :label="0">草稿</el-radio>
                        <el-radio :label="1">待审核</el-radio>
                        <el-radio :label="2">审核通过</el-radio>
                        <el-radio :label="3">审核失败</el-radio>
                        <el-radio :label="4">已删除</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="频道">{{channelId}}
                    <el-select v-model="channelId" placeholder="请选择频道">
                        <el-option v-for="(item, index) in channels" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="rangeDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <!-- button按钮的 click 事件有个默认参数
            当你没有指定参数的时候，它会默认传递一个没用的数据 -->
                    <el-button type="primary" :disabled="loading" @click="loadArticles(1)">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据筛选表单 -->
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                根据筛选条件查询到{{ totalCount }}条数据
            </div>
            <!-- 数据列表 -->
            <el-table :data="articles" stripe style="width: 100%" class="list-table" size="small" v-loading="loading">
                <el-table-column label="封面" width="180">
                    <template slot-scope="scope">
                        <!-- <img v-if="scope.row.cover.images[0]" class="article-cover" :src="scope.row.cover.images[0]" />
                 <img v-else class="article-cover" src="./no-cover.gif" /> -->
                        <el-image class="article-cover" :src="scope.row.cover.images[0]">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <!-- 这种情况是在运行期间动态改变处理的，而本地图片必须在打包的时候就存在 -->
                        <!-- <img  class="article-cover" :src="scope.row.cover.images[0] || './no-cover.gif'" /> -->
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" width="180">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 0" type="warning">草稿</el-tag>
                        <el-tag v-if="scope.row.status === 1">待审核</el-tag>
                        <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
                        <el-tag v-if="scope.row.status === 3" type="danger">审核失败</el-tag>
                        <el-tag v-if="scope.row.status === 4" type="info">已删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-edit" circle @click="$router.push('/publish/?id='+scope.row.id)"></el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" circle @click="onDeleteArticle(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据列表 -->

            <!-- 列表分页 -->
            <el-pagination background layout="prev, pager, next" :total="totalCount" :page-size="pageSize" :disabled="loading" @current-change="onCurrentChange" :current-page="page">
            </el-pagination>
            <!-- 列表分页 -->
        </el-card>
    </div>
</template>

<script>
import { getArticle, getArticleChannels, delArticle } from "@/api/article";
export default {
    name: "ArticleIndex",
    data() {
        return {
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            articles: [],
            totalCount: 0, //总数据条数
            pageSize: 10, //每页条数
            status: null, //查询文章状态，不传就是全部
            channels: [], //文章频道列表数据
            rangeDate: null, //范围日期
            loading: false,
            page: 1, //当前页
            channelId:null,
        };
    },
    created() {
        this.loadChannels();
        this.loadArticles();
    },
    methods: {
        loadArticles(page = 1) {
            this.loading = true;
            getArticle({
                page,
                per_page: this.pageSize,
                status: this.status,
                channel_id: this.channelId,
                begin_pubdata: this.rangeDate ? this.rangeDate[0] : null,
                end_pubdate: this.rangeDate ? this.rangeDate[1] : null,
            }).then((res) => {
                const { results, total_count: totalCount } = res.data.data;
                this.articles = results;
                this.totalCount = totalCount;
                this.loading = false;
            });
        },
        // 获取频道列表
        loadChannels() {
            getArticleChannels().then((res) => {
                this.channels = res.data.data.channels;
            });
        },
        //分页
        onCurrentChange(page) {
            this.loadArticles(page);
        },
        onDeleteArticle(articleId) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delArticle(articleId.toString()).then((res) => {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.loadArticles(this.page);
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.filter-card {
    margin-bottom: 20px;
}
.list-table {
    margin-bottom: 20px;
}
.article-cover {
    width: 80px;
    background-size: cover;
}
</style>
